<template>
  <div class="login">
    <div class="city">
      <img src="../../assets/images/city.png" alt="" />
    </div>
    <div class="jbl-logo">
      <img src="../../assets/images/组 4705@2x.png" alt="" />
    </div>
    <section v-if="$route.path === '/login'" class="login_container">
      <div class="login_container_logo"></div>
      <div class="login_container_title">教培机构推广运营</div>
      <div class="login_container_tip">— 数据管理平台 —</div>
      <div class="login_container_submit" @click="handleLogin">登录</div>
      <div class="login_container_register" @click="handleRegister">注册</div>
      <div class="subtitle">
        「 找课大平台，尽在家巴啦；发布精彩课程，覆盖周边五公里 」
      </div>
    </section>
    <div class="bg-bottom">
      <!-- <div class="left"></div>
      <div class="right"></div> -->
    </div>
    <!-- <router-view :key="key"></router-view> -->
    <footer>
      <div class="footer-container">
        <div class="left">
          <p>
            家巴啦社区网络科技(佛山)有限公司 版权所有丨Copyright ©2020 jiabala.
            All Rights Reserved
          </p>
          <div class="ic">
            <div>
              <img src="../../assets/images/组 4701@2x.png" alt="" />
              <span style="margin-left: 8px">电子营业执照</span>
            </div>
            <div>
              <img
                style="margin-left: 50px"
                src="../../assets/images/组 4703@2x.png"
                alt=""
              />
              <span style="margin-left: 8px"
                >粤公网安备 44060602001280号丨粤ICP备19036519号</span
              >
            </div>
          </div>
        </div>
        <div class="right">
          <ul class="product">
            <li class="item" v-for="(item, index) in productList" :key="index">
              <span>{{ item.name }}</span>
              <img :src="item.url" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import jblFooter from "@/views/login/compoents/jblFooter";
export default {
  name: "Rest",
  inject: ["reload"],
  components: {
    jblFooter,
  },
  data() {
    return {
      redirect: undefined,
      therQuery: {},
      productList: [
        {
          name: "家巴啦售课平台",
          url: require("../../assets/images/组 4706@2x.png"),
        },
        {
          name: "家巴啦云视",
          url: require("../../assets/images/yunshi.png"),
        },
        {
          name: "家巴啦直聘",
          url: require("../../assets/images/zhipin.png"),
        },
        {
          name: "|",
          url: "",
        },
        {
          name: "服务热线：400 886 8956",
          url: "",
        },
      ],
    };
  },
  computed: {
    key() {
      return `${this.$router.name}${new Date()}`;
    },
  },
  beforeRouteLeave(to, form, next) {
    // this.isScanning = false
    next();
  },
  watch: {
    $route: {
      handler: function (route) {
        console.log(route);
        // this.reload()
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  created() {
    console.log(this.$route.path);
  },
  methods: {
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    handleLogin() {
      this.$router.push("/mobileLogin");
    },
    handleRegister() {
      this.$store.dispatch("user/resetToken");
      this.$router.push("/register");
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  z-index: 1;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 1000px;
  height: 100vh;
  background: linear-gradient(315deg, #3fd2ce 0%, #2e88e3 100%);
  overflow: hidden;
  box-sizing: border-box;
  .city {
    z-index: 0;
    position: absolute;
    bottom: 1.06rem;
    width: 100%;
    > img {
      width: 100%;
    }
  }
  .jbl-logo {
    padding: 0.4rem 0 0 0.73rem;
    width: 100%;
    img {
      width: 4.53rem;
    }
  }
  .bg-top {
    // position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 4rem;
      height: 3rem;
      background-image: url("../../assets/images/1.gif") 100% 100%;
      background-size: 100% 100%;
      background-position: center;
    }
    .right {
      position: absolute;
      right: 10%;
      top: -0.3rem;
      width: 1rem;
      height: 1rem;
      background: linear-gradient(to bottom, #8de9fc 0%, #16dbcc 100%);
      border-radius: 50%;
      animation: prog 1s ease-in 0s infinite alternate;
    }
    @keyframes prog {
      from {
        top: -0.3rem;
      }
      to {
        top: 0.1rem;
      }
    }
  }
  .bg-bottom {
    z-index: 0;
    position: absolute;
    bottom: 0.8rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      position: absolute;
      left: 10%;
      bottom: 0px;
      width: 0.6rem;
      height: 0.6rem;
      background: linear-gradient(to bottom, #8de9fc 0%, #16dbcc 100%);
      border-radius: 50%;
      animation: progt 1s ease-in 0s infinite alternate;
    }
    @keyframes progt {
      from {
        bottom: 0px;
      }
      to {
        bottom: 0.2rem;
      }
    }
    .right {
      position: absolute;
      top: -5rem;
      right: 0;
      width: 1.5rem;
      height: 2.5rem;
      background-image: url("../../assets/images/2.gif");
      background-size: 100% 100%;
      background-position: center;
    }
  }
  &_container {
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 7rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.16rem;
    opacity: 1;
    &_logo {
      // margin-top: 0.8rem;
      width: 1.1rem;
      height: 1.1rem;
      background-image: url("../../assets/images/logo.png");
      background-size: 100% 100%;
      background-position: center;
    }
    &_title {
      margin: 0.2rem 0 0.03rem;
      font-size: 0.5rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(78, 92, 101, 1);
      opacity: 1;
    }
    &_tip {
      font-size: 0.36rem;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 0.5rem;
      color: #4e5c65;
      letter-spacing: 0.05rem;
      opacity: 1;
    }
    &_submit {
      cursor: pointer;
      margin-top: 0.6rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 0.8rem;
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      // background:rgba(22,219,204,1);
      background: #16dbcc;
      box-shadow: 0px 0.1rem 0.25rem rgba(22, 219, 204, 0.15);
      opacity: 1;
      border-radius: 0.08rem;
    }
    &_register {
      cursor: pointer;
      margin-top: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 0.8rem;
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(179, 185, 199, 1);
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 0.08rem;
    }
    .subtitle {
      margin-top: 0.6rem;
      font-size: 0.18rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(194, 199, 210, 1);
      opacity: 1;
    }
    &_appcode {
      width: 2.6rem;
      height: 2.6rem;
      background-image: url("../../assets/images/app@2x.png");
      background-size: 100% 100%x;
      background-position: center;
    }
    &_appdown {
      margin-top: 0.1rem;
      width: 2.8rem;
      text-align: center;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 0.4rem;
      color: rgba(78, 92, 101, 1);
      opacity: 1;
    }
    &_mode {
      margin-top: 0.68rem;
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(179, 185, 199, 1);
      opacity: 1;
      span:nth-of-type(1),
      span:nth-of-type(3) {
        cursor: pointer;
      }
      span:nth-of-type(2) {
        margin: 0 0.3rem;
      }
    }
  }
  footer {
    padding: 0 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 1100px;
    height: 1.1rem;
    font-family: PingFang SC;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    .footer-container {
      max-width: 1450px;
      min-width: 1250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        > p {
          margin: 0;
          padding: 0;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          opacity: 1;
        }
        .ic {
          margin-top: 14px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            > img {
              width: 17px;
            }
            > span {
              font-size: 12px;
              font-weight: 400;
            }
          }
        }
      }
      .right {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        ul li {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
        .product {
          display: flex;
          .item {
            position: relative;
            cursor: pointer;
            margin-right: 50px;
            &:hover > img {
              opacity: 1;
            }
            > img {
              position: absolute;
              top: -130px;
              left: 50%;
              transform: translateX(-50%);
              width: 114px;
              transition: all 0.3s ease-in-out;
              opacity: 0;
            }
          }
          .item:last-child {
            margin: 0;
          }
        }
      }
    }
  }
}
</style>
